<template>
    <div class="view-container">

        <div class="main-content">

            <div class="list-container">

                <div class="filter-container" style="padding-top: 0">

                    <el-form
                            :inline="true"
                            :model="formData"
                            label-position="right"
                            label-width="80px"
                            size="small"
                            class="filter-form-inline"
                    >
                        <el-row style="margin-left: 0px; margin-right: 0px">
                            <el-col :span="6">
                                <el-form-item label="状态" style="width: 100%">
                                    <el-select
                                            v-model="formData.ifAccept"
                                            clearable
                                            style="width: 100%"
                                            placeholder="请选择状态"
                                            @change="listSearch"
                                    >
                                        <el-option
                                                v-for="item in statusOption"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value"
                                        >
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>

                            <el-col :span="6">
                                <el-form-item label="任务类型" style="width: 100%">
                                    <el-select
                                            v-model="formData.taskType"
                                            clearable
                                            style="width: 100%"
                                            placeholder="请选择任务类型"
                                            @change="listSearch"
                                    >
                                        <el-option
                                                v-for="item in typesOption"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value"
                                        >
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>

                            <el-col :span="6">
                                <el-form-item label="产品信息" style="width: 100%">
                                    <el-select
                                            v-model="formData.productId"
                                            :loading="loading"
                                            :remote-method="remoteMethod"
                                            clearable
                                            filterable
                                            placeholder="请选择产品"
                                            remote
                                            reserve-keyword
                                            @change="listSearch"
                                    >
                                        <el-option
                                                v-for="item in products"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id"
                                        />
                                    </el-select>

                                </el-form-item>
                            </el-col>

                            <el-col :span="2">
                                <el-form-item style="width: 100%">
                                    <more-search-btn v-model:is-more="visible"/>
                                </el-form-item>
                            </el-col>

                            <el-col :span="4">
                                <el-form-item style="width: 100%">
                                    <el-button
                                            class="border-btn"
                                            @click="reset"
                                    >重置</el-button>
                                    <el-button
                                            type="primary"
                                            class="main-btn"
                                            @click="listSearch"
                                    >搜索</el-button>
                                </el-form-item>
                            </el-col>

                        </el-row>

                        <el-row v-if="visible">

                            <el-col :span="6">
                                <el-form-item label="跟进职员" style="width: 100%">
                                    <el-select
                                            v-model="formData.headId"
                                            clearable
                                            style="width: 100%"
                                            placeholder="请选择职员"
                                            @change="listSearch"
                                    >
                                        <el-option
                                                v-for="item in headOptions"
                                                :key="item.id"
                                                :label="item.realName"
                                                :value="item.id"
                                        >
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>

                            <el-col :span="6">
                                <el-form-item label="关键字" style="width: 100%;">
                                    <el-input
                                            v-model="formData.selectStr"
                                            clearable
                                            placeholder="输入任务编号、任务摘要等关键字查询"
                                    />
                                </el-form-item>
                            </el-col>

                        </el-row>
                    </el-form>

                </div>

                <table-view :data="tableData" :visible="visible" @row-click="rowClick">
                    <el-table-column
                            fixed="left"
                            show-overflow-tooltip
                            align="left"
                            header-align="center"
                            prop="taskNo"
                            label="任务编号"
                            :min-width="150"
                    />
                    <el-table-column
                            show-overflow-tooltip
                            align="center"
                            header-align="center"
                            label="任务类型"
                            :min-width="100"
                    >
                        <template #default="scope">
                            {{getLabel('task_type',scope.row.taskType)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            show-overflow-tooltip
                            align="left"
                            header-align="center"
                            prop="productPopularName"
                            label="通用名"
                            :min-width="150"
                    />
                    <el-table-column
                            show-overflow-tooltip
                            align="center"
                            header-align="center"
                            prop="productName"
                            label="商品名"
                            :min-width="100"
                    />
                    <el-table-column show-overflow-tooltip align="center" header-align="center" prop="packSpecs" label="包装规格" :min-width="100"/>
                    <el-table-column show-overflow-tooltip align="center" header-align="center" prop="producer" label="生产厂家" :min-width="100"/>
                    <el-table-column
                            show-overflow-tooltip
                            align="center"
                            header-align="center"
                            label="任务摘要"
                            prop="abstract"
                            :min-width="150"
                    />
                    <el-table-column
                            align="center"
                            header-align="center"
                            label="分配时间"
                            :min-width="150"
                    >
                        <template #default="scope">
                            {{dateFormat('yyyy-mm-dd HH:MM',scope.row.createdAt)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            show-overflow-tooltip
                            align="center"
                            header-align="center"
                            label="负责职员"
                            prop="headName"
                            :min-width="100"
                    />
                    <el-table-column
                            align="center"
                            header-align="center"
                            label="状态"
                            fixed="right"
                            :min-width="100"
                    >
                        <template #default="scope">
                            {{getLabel('allocation_status',scope.row.ifAccept)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            align="center"
                            header-align="center"
                            label="操作"
                            fixed="right"
                            :min-width="100"
                    >
                        <template #default="{row}">
                            <el-button
                                    v-if="row.ifAccept == 0 && userInfo.ID == row.headId"
                                    type="text"
                                    @click="onConfirm(row)"
                            >确认</el-button>
                        </template>
                    </el-table-column>
                </table-view>

                <Pagination
                        v-model:page="formData.page"
                        v-model:limit="formData.pageSize"
                        style="display: flex; justify-content: flex-end"
                        :total="total"
                        @pagination="getList"
                />

            </div>

        </div>

    </div>
</template>

<script>
    import { getProductName } from "../../../../../../../utils/commonFun";
    import { useRouter } from 'vue-router'
    import {crmStore} from "../../../../../store";
    import { defineComponent, reactive, toRefs, ref, inject, getCurrentInstance, onMounted } from 'vue'
    export default defineComponent({
        name: "index",
        setup(){
            const currentInstance = getCurrentInstance()
            const api = inject('api')
            const router = useRouter()
            const statusOption = crmStore.getters['dictionary/getDictionary']['allocation_status']
            const typesOption = crmStore.getters['dictionary/getDictionary']['task_type']
            const userInfo = crmStore.getters['user/userInfo']
            const headOptions = crmStore.getters['company/getHeadOptions']
            var data = reactive({
                visible:false,
                formData:{
                    page:1,
                    pageSize:20,
                    taskStatus:'',
                    taskType:'',
                    productId:'',
                    headId:'',
                    selectStr:'',
                    ifAccept:'',
                },
                tableData:[],
                total:0,
                loading:false,
                products:[],
            })

            const reset = () => {
                data.formData = {
                    page:1,
                    pageSize:20,
                    taskStatus:'',
                    taskType:'',
                    productId:'',
                    headId:'',
                    selectStr:'',
                    ifAccept:'',
                }

                getList()
            }

            const listSearch = () => {
                data.page = 1
                getList()
            }

            const getList = () => {
                let a = {...data.formData}
                a.headId = Number(a.headId)
                a.productId = Number(a.productId)

                api.task.TASK_ALLOCATION_AGENT_WAIT_LIST(a).then(res=>{
                    if (!res.code){
                        data.tableData = res.data.list || []
                        data.total = res.data.total
                    }else{
                        currentInstance.proxy.customMessage({type:'error',message:res.msg})
                    }
                })
            }

            const remoteMethod = (query) => {
                data.products = []
                data.loading = true

                if (query) {
                    const pam = {
                        keyWord: query,
                    }
                    api.common.GET_PRODUCT_LIST(pam).then((res) => {
                        if (!res.code && res.data) {
                            res.data.list.forEach(a => {
                                a.name = getProductName(a)
                            })
                            data.products = res.data.list

                        } else {
                            currentInstance.proxy.customMessage({type: 'error', message: res.msg})
                        }
                        data.loading = false
                    })
                } else {
                    data.loading = false
                }
            }

            const onConfirm = (row) => {
                currentInstance.proxy
                    .alertBox({
                        message: '确认任务后任务状态将变更为进行中',
                        title: '确认',
                    })
                    .then(() => {
                        api.task.TASK_ALLOCATION_AGENT_DEAL(row.id).then(res=>{
                            if (!res.code){
                                currentInstance.proxy.customMessage({type:'success',message:'确认成功'})

                                getList()
                            }else{
                                currentInstance.proxy.customMessage({type:'error',message:res.msg})
                            }
                        })
                    })
                    .catch((err) => {
                        console.log(err)
                    })
            }

            const rowClick = (row,column) => {
                if (column.label === '操作') return
                router.push({name:'confirmDetail',query:{id:row.id}})
            }

            onMounted(() => {
                getList()
            })

            return{
                ...toRefs(data),
                statusOption,
                headOptions,
                userInfo,
                typesOption,

                rowClick,
                getList,
                reset,
                listSearch,
                onConfirm,
                remoteMethod,
            }
        }
    })
</script>

<style scoped>

</style>
